import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, 
  TouchableOpacity,Dimensions,ScrollView
} from 'react-native';
const {height, width} = Dimensions.get('window');
import Toast, {DURATION} from 'react-native-easy-toast'
import BackButton from '../../component/BackButton';
import MyButton from '../../component/MyButton';
import Orientation from 'react-native-orientation';
import {BASEURL} from '../../api/api';
import {jumpPage} from '../../common/common';
import VipPower from './VipPower';
const dismissKeyboard = require('dismissKeyboard');
export default class VipPay extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title:'会员支付',
      headerRight:(<View></View>),
			headerLeft:<BackButton navigation = {navigation}/>,
			headerStyle:{
				backgroundColor:'#272727'
			},
			headerTitleStyle:{
				color:'white',
				flex:1,
				textAlign:'center',
			}
    }
	};
	constructor(props){
		super(props);
		this.state = ({
			userInfo:{},
			selectLevel:'0',
			vipData:[
				{name: '初级VIP', price: '2000',level:'1'},	
				{name: '中级VIP', price: '5000',level:'2'},
				{name: '高级VIP', price: '9000',level:'3'},
			],
			payMetmod:'wechat'
		})
  }
  componentWillMount() {
    if(this.props.navigation.getParam('edit')){
			Orientation.lockToPortrait();
		}
	}
	componentWillUnmount() {
		if(this.props.navigation.getParam('edit')){
			Orientation.lockToLandscape();
		}
   
  }
	_goVipCard(){
		jumpPage(this.props.navigation,'vipCard');
	}
	goAgreement(){
		jumpPage(this.props.navigation,'vipAgreement');
	}
	_goVipPriv(){
		jumpPage(this.props.navigation,'vipPrivilege');
	}
	_vipPress(index){
		this.setState({
			selectLevel:index,
		})
	}
	_payMethod(method){
		this.setState({
			payMetmod:method
		})
	}
	_renderVip(){
		let {selectLevel,vipData } = this.state;
		
		let array = [];
		for(let i=0; i<vipData.length; i++){
			let item = vipData[i];
			array.push(
				<TouchableOpacity  key={i} activeOpacity={0.8} style={[styles.vipCell,selectLevel==i?styles.vipCellActive:null]} onPress={()=>this._vipPress(i)}>
					<Text style={[styles.vipNameText,selectLevel==i?styles.vipNameTextActive:null]}>{item.name}</Text>
					<Text style={[styles.vipPriceText,selectLevel==i?styles.vipPriceTextActive:null]}>
						￥<Text style={{fontSize:22}}>{item.price}</Text>
					</Text>
				</TouchableOpacity>
			)
		}
		return array;
	}
	//支付方式
	_renderPayMethod(){
		let payIcon = {
			width: width/10,
			height: width/10,
			marginRight:15,
		}
		let icon = {
			width:20,
			height:20,
		}
		let text = {
			color:'#fff',
			fontSize:14,
		}
		let payMetmod = this.state.payMetmod;
		return(
			<View style={{padding:15,backgroundColor:'#272727'}}>
				<TouchableOpacity activeOpacity={0.7} style={styles.methodView} onPress={()=>this._payMethod('wechat')}>
					<View style={{flexDirection:'row',alignItems:'center'}}>
						<Image style={payIcon} source={require('../../images/mine/icon_wechat_pay.png')} />
						<Text style={text}>微信支付</Text>
					</View>
					<Image style={icon} source={payMetmod == 'wechat'?require('../../images/mine/icon_sel.png'):require('../../images/mine/icon_no_sel.png')}/>
				</TouchableOpacity>
				<TouchableOpacity activeOpacity={0.7} style={[styles.methodView,{marginTop:15}]} onPress={()=>this._payMethod('ali')}>
					<View style={{flexDirection:'row',alignItems:'center'}}>
						<Image style={payIcon} source={require('../../images/mine/icon_ali_pay.png')} />
						<Text style={text}>支付宝支付</Text>
					</View>
					<Image style={icon} source={payMetmod == 'ali'?require('../../images/mine/icon_sel.png'):require('../../images/mine/icon_no_sel.png')}/>
				</TouchableOpacity>
			</View>
		)
	}
	render(){
		const powerData = [
			{text: '免费模板' ,img: require('../../images/mine/vip_temp.png')},
			{text: '去广告' ,img: require('../../images/mine/vip_advis.png')},
			{text: '高清1080P' ,img: require('../../images/mine/vip_1080.png')},
			{text: '去水印' ,img: require('../../images/mine/vip_loading.png')},
			{text: '免费分享' ,img: require('../../images/mine/vip_share.png')},
			{text: 'VIP服务器' ,img: require('../../images/mine/vip_service.png')},
			{text: '误删找回' ,img: require('../../images/mine/vip_find.png')},
			{text: 'CDN加速' ,img: require('../../images/mine/vip_cdn.png')},
		]
		return(
			<ScrollView style={{flex:1,borderWidth:0, borderColor:'red'}} showsVerticalScrollIndicator={false}>
				<SplitView/>
				<View style={{backgroundColor:'#272727'}}>
					<TouchView text='VIP会员' ao={1} rightImg={false} />
					<View style={styles.topView}>
						{this._renderVip()}
					</View>
				</View>
				<SplitView/>
				<TouchView text='代金券' rightText='0.00元' press={()=>this._goVipCard()}rightImg={true} />
				{this._renderPayMethod()}
				<SplitView/>
				<TouchView text='会员特权' rightText='更多详情' press={()=>this._goVipPriv()}rightImg={true} />
				<VipPower data={powerData} style={{backgroundColor:'#272727'}}/>
				<SplitView/>
				<View style={{flexDirection:'row',justifyContent:'center',backgroundColor:'#272727',paddingTop:10,paddingBottom:10}}>
					<Text style={{color:'white'}}>支付视为已阅读，并同意</Text>
					<TouchableOpacity onPress={()=>this.goAgreement()}>
						<Text style={{color:'#ADA9A4'}}>《VIP会员服务协议》</Text>
					</TouchableOpacity>
				</View>
				<SplitView/>
				<View style={{flexDirection:'row',justifyContent:'space-between',backgroundColor:'#272727'}}>
					<View style={{paddingLeft:20,alignItems:'center',justifyContent: 'center'}}>
						<View style={{flexDirection:'row',alignItems:'baseline',paddingBottom:5,}}>
							<Text style={{fontSize:16,color:'#fff'}}>总计：</Text>
							<Text style={{color:'#EFE486',fontSize:24,fontWeight:"bold"}}>￥<Text>{this.state.vipData[this.state.selectLevel].price}</Text></Text>
							<Text style={{paddingLeft:10,color:'#ADA9A4'}}>已优惠0.00元</Text>
						</View>
						{/* <Text style={{color:'#777'}}>您已选择{this.state.vipData[this.state.selectLevel].name}会员套餐</Text> */}
					</View>
					<TouchableOpacity style={{backgroundColor: '#C1A050',justifyContent:'center',
						alignItems:'center',padding:20,paddingTop:25,paddingBottom:25}}>
						<Text style={{fontSize:18,color:'white'}}>立即开通</Text>
					</TouchableOpacity>
				</View>
			</ScrollView>
		)
	}
}
class TouchView extends Component{
	render(){
		return(
			<TouchableOpacity activeOpacity={this.props.ao?this.props.ao:0.6}   style={{flexDirection:'row',justifyContent:'space-between',
			alignItems:'center',paddingLeft:20,paddingRight:15,paddingTop:10,paddingBottom:10,backgroundColor:'#272727'}}
			 onPress={this.props.press}> 
				<View style={{flexDirection:'row',alignItems:'center'}}>
					{!this.props.img?null:
						<Image style={{width:20,height:20,marginRight:5}} source={this.props.img}/>
					}
					<Text style={{color:'#fff',fontSize:15,fontWeight:'bold'}}>{this.props.text}</Text>
				</View>
				<View style={{flexDirection:'row',alignItems:'center'}}>
					{!this.props.rightText?null:
						<Text style={{color:'#ADA9A4'}}>{this.props.rightText}</Text>
					}
					{ !this.props.rightImg?null:
						<Image style={{width:18,height:16}} source={require('../../images/mine/arrow_right.png')}/>
					}
				</View>
				
			</TouchableOpacity>
		)
	}
}
class SplitView extends Component{
	render(){
		return(
			<View style={{height:10,backgroundColor:'#000'}}></View>
		)
	}
}
const styles = StyleSheet.create({
	methodView:{
		flexDirection:'row',
		alignItems:'center',
		justifyContent:'space-between'
	},
	vipNameText:{
		color: '#ADA9A4',
		marginBottom:15,
	},
	vipNameTextActive:{
		color: '#bcac48',
	},
	vipPriceText:{
		color: '#ADA9A4',
	},
	vipPriceTextActive:{
		color: '#bcac48',
	},
	topView:{
		marginLeft:10,
		marginRight:10,
		flexDirection:'row',
		justifyContent:'space-around',
		height:120,
	},
	vipCell:{
		width: (width-50)/3,
		alignItems:'center',
		//backgroundColor:'#00bfff',
		justifyContent:'center',
		margin:5,
		borderColor:'#AA8F3E',
		borderWidth:1,
		borderRadius:5,
	},
	vipCellActive:{
		//backgroundColor:'#468dcf',
		borderColor:'#C5AF5C',
		borderWidth:2,
	}
})